<template>
  <div>
    <nav-bar class="category-nav"><div slot="center">购物街</div></nav-bar>
    <tab-control :titles="['流行','新款','精选']" @tabClick="tabClick" class="tab-control"></tab-control>
    <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll" :pull-up-load="true" @pullingUp="moreScroll">
    <goods-list :goods="showGoods"></goods-list> 
  </scroll>
  <back-top class="back-top" @click.native="backClick" v-show="showBackTop">
    <img src="~assets/img/common/top.png" alt="">
  </back-top> 
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'

import {getHomeGoods} from 'network/home'
export default {
  name: 'Category',
  props: {
    msg: String
  },
  components: {
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop
  },
  data() {
    return {
      goods: {
        'pop': {page: 0,list: []},
        'new': {page: 0,list: []},
        'sell': {page: 0,list: []}
      },
      currentTab: 'pop',
      showBackTop: false,
      saveY: 0
    }
  },
  created() {
    this.getH_Goods('pop')
    this.getH_Goods('new')
    this.getH_Goods('sell')
  },
  mounted() {
    /* 监听item图片加载完成 */
    this.$bus.$on('categoryItemImgLoad',() => {
      this.$refs.scroll.refresh()
    })
  },
  activated() {
    this.$refs.scroll.refresh()
    /* 回到位置 */
    this.$refs.scroll.scrollTo(0,this.saveY,0)
  },
  deactivated() {
    /* 记录离开位置 */
    this.saveY = this.$refs.scroll.scroll.y
  },
  computed: {
    showGoods() {
      return this.goods[this.currentTab].list
    }
  },
  methods: {
    /* 事件监听方法 */
    tabClick(index) {
      switch(index){
        case 0: 
        this.currentTab = 'pop';
        break;
        case 1: 
        this.currentTab = 'new';
        break;
        case 2: 
        this.currentTab = 'sell';
        break;
      }
    },
    backClick() {
      this.$refs.scroll.scrollTo(0,0,500)
    },
    //返回顶部箭头显示
    contentScroll(position) {
      this.showBackTop = (-position.y) > 500
    },
    //上拉加载更多
    moreScroll() {
      this.getH_Goods(this.currentTab)
      this.$refs.scroll.finishPullUp()
    },
    /* 网络请求方法 */
    getH_Goods(type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type,page).then(res => {
      this.goods[type].list.push(...res.data.data.list)
      this.goods[type].page += 1
      })
    } 
    
  }
}
</script>


<style scoped>
.content {
  height: 100vh;
  overflow: hidden;
}
.back-top {
  position: fixed;
  right: 10px;
  bottom: 60px;
}
.tab-control{
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 99;
}
.category-nav{
  background: var(--color-tint);
  color: #fff;
  z-index: 99;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  font-weight: 700;
}
</style>
